<template>
    <div>
        <el-form ref="form" :model="formData" :label-width="labelWidth">
            <div class="gridBox" ref="gridBox">
                <el-form-item
                    v-for="item in formList"
                    :key="item.label"
                    :label="item.label"
                    :rules="item.__rules__"
                    :prop="item.rulesProp"
                    :class="[
                        blockItemTypes.includes(item.type) ? 'blockItem' : '',
                    ]"
                >
                    <div class="itemContent">
                        <div
                            v-if="
                                item.type === 'select' &&
                                item.status === 'readonly'
                            "
                        >
                            {{
                                1
                                    | getSelectLabel(
                                        item.selectList,
                                        formData[item.prop]
                                    )
                            }}
                        </div>
                        <div
                            v-else-if="
                                item.type === 'text' ||
                                item.status === 'readonly'
                            "
                        >
                            {{ formData[item.prop] }}
                        </div>
                        <div v-else-if="item.type === 'input'">
                            <el-input
                                :placeholder="item.placeholder || '请输入内容'"
                                :disabled="item.status === 'disabled'"
                                v-bind="item.prototype"
                                v-model="formData[item.prop]"
                                clearable
                            ></el-input>
                        </div>
                        <div v-else-if="item.type === 'select'">
                            <el-select
                                :placeholder="item.placeholder || '请选择'"
                                :disabled="item.status === 'disabled'"
                                v-bind="item.prototype"
                                v-model="formData[item.prop]"
                                clearable
                                filterable
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in item.selectList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                        <div v-else-if="item.type === 'switch'">
                            <el-switch
                                :disabled="item.status === 'disabled'"
                                v-bind="item.prototype"
                                v-model="formData[item.prop]"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                            >
                            </el-switch>
                        </div>
                        <div v-else-if="item.type === 'upload'">
                            <Upload
                                ref="upload"
                                v-model="formData[item.prop]"
                                v-bind="item.prototype"
                            ></Upload>
                        </div>
                        <div v-else-if="item.type === 'textarea'">
                            <el-input
                                :autosize="{
                                    minRows: item.minRows || 3,
                                    maxRows: item.maxRows || 3,
                                }"
                                type="textarea"
                                clearable
                                :placeholder="item.placeholder || '请输入内容'"
                                v-model="formData[item.prop]"
                                :maxlength="item.maxlength"
                                :resize="item.resize || 'none'"
                                show-word-limit
                                v-bind="item.prototype"
                            >
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>
<script>
import Upload from "@/components/FileUpload/pictureCard.vue";
export default {
    name: "formItems",
    components: { Upload },
    mixins: [],
    props: {
        form: {
            type: Array,
            default: () => [],
        },
        value: {
            type: Object,
            default: () => {},
        },
        column: {
            default: 2,
        },
        gap: {
            default: "0 100px",
        },
        labelWidth: {
            default: "80px",
        },
        itemContentWidth: {
            default: "100%",
        },
    },
    data() {
        return {
            blockItemTypes: ["upload", "textarea"],
        };
    },
    filters: {
        getSelectLabel(T, row, key) {
            let item = row.find((item) => {
                return item.value === key;
            });
            return item.label;
        },
    },
    computed: {
        formList: {
            get() {
                return this.form;
            },
            set(val) {
                this.$emit("changeForm", val);
            },
        },
        formData: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit("input", val);
            },
        },
    },
    watch: {
        formList: {
            deep: true,
            handler: function (val) {
                let that = this;
                if (val && val.length > 0) {
                    val.forEach((item) => {
                        if (!item.type || !item.prop) {
                            throw new Error("缺少type和prop字段");
                        }
                        if ("rules" in item && !("__rules__" in item)) {
                            item.__rules__ = that._.cloneDeep(item.rules);
                        }
                        if ("__rules__" in item) {
                            if (item.status === "write") {
                                item.__rules__ = item.rules;
                            } else {
                                item.__rules__ = [];
                            }
                        }
                        if (!("status" in item)) {
                            that.$set(item, "status", "write");
                        }
                    });
                }
            },
        },
    },
    created() {
        //内容圆角的初始值获取,contentBorderRadius是ref附在父级和同级都可以
        this.$nextTick(() => {
            this.$refs.gridBox.style.setProperty("--column", this.column);
            this.$refs.gridBox.style.setProperty("--gap", this.gap);
            this.$refs.gridBox.style.setProperty(
                "--itemContentWidth",
                this.itemContentWidth
            );
        });
    },
    mounted() {
        // console.log(this.$refs.form);
    },
    methods: {
        validate() {
            return new Promise((resolve, reject) => {
                this.$refs.form.validate((valid) => {
                    resolve(valid);
                });
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.gridBox {
    --column: 2;
    --gap: 0 50px;
    --itemContentWidth: 100%;
    display: grid;
    padding: 15px 0;
    gap: var(--gap);
    grid-template-columns: repeat(var(--column), minmax(0, 1fr));
    ::v-deep .el-select {
        width: 100%;
    }
    .itemContent {
        width: var(--itemContentWidth);
        // height: 100%;
        // display: flex;
        // align-items: center;
    }
}
::v-deep .blockItem .el-form-item__content {
    line-height: normal;
    height: auto !important;
}
</style>
